<template>
  <div class="total">
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
      <el-radio-button label="top">top</el-radio-button>
      <el-radio-button label="right">right</el-radio-button>
      <el-radio-button label="bottom">bottom</el-radio-button>
      <el-radio-button label="left">left</el-radio-button>
    </el-radio-group>

    <el-tabs
      :tab-position="tabPosition"
      style="height: 200px"
      class="demo-tabs"
    >
      <el-tab-pane label="User">User</el-tab-pane>
      <el-tab-pane label="Config">Config</el-tab-pane>
      <el-tab-pane label="Role">Role</el-tab-pane>
      <el-tab-pane label="Task">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts"></script>
import { ref } from 'vue' const tabPosition = ref('left')
<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
span {
  cursor: pointer;
  font-weight: bold;
  color: grey;
  font-size: 0.1rem;
}
.total {
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  height: auto;
  width: 5rem;
  margin-left: 1rem;
  margin-top: $item-height * 2;

  .bar {
    height: 1rem;
    width: 1rem;
    display: flex;
    flex-direction: column;

    &-item {
      width: 100%;
      height: 0.4rem;

      span {
        font-size: 0.1rem;
      }
    }
  }
}
</style>
